<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>吕超英语日期计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 2rem auto;
            padding: 20px;
            background-color: #f0f0f0;
        }

        .calculator {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .input-group {
            margin: 15px 0;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        input[type="date"], 
        input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #0056b3;
        }

        #result {
            margin-top: 20px;
            padding: 15px;
            background: #e9f5ff;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h2>吕超英语日期计算器</h2>
        
        <div class="input-group">
            <label for="baseDate">基准日期：</label>
            <input type="date" id="baseDate">
        </div>

        <div class="input-group">
            <label for="days">加减天数：</label>
            <input type="number" id="days" value="0" step="1">
        </div>

        <button onclick="calculate()">立即计算</button>
        
        <div id="result"></div>
    </div>

    <script>
        // 设置默认日期为今天
        window.onload = function() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('baseDate').value = today;
        }

        function calculate() {
            // 获取输入值
            const baseDate = document.getElementById('baseDate').value;
            const days = parseInt(document.getElementById('days').value);
            
            // 验证输入
            if (!baseDate || isNaN(days)) {
                showResult("请输入有效的日期和天数", "error");
                return;
            }

            // 创建日期对象
            const dateObj = new Date(baseDate);
            if (isNaN(dateObj.getTime())) {
                showResult("无效的日期格式", "error");
                return;
            }

            // 计算新日期
            dateObj.setDate(dateObj.getDate() + days);
            
            // 格式化结果
            const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
            const newDate = dateObj.toLocaleDateString('zh-CN', options);
            
            // 显示结果
            const resultText = `${baseDate} ${days >= 0 ? '+' : '-'} ${Math.abs(days)}天 = ${newDate}`;
            showResult(resultText, "success");
        }

        function showResult(text, type) {
            const resultDiv = document.getElementById('result');
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = text;
            resultDiv.className = type === "error" ? "error" : "success";
        }
    </script>
</body>
</html>